<template>
  <div class="home-banner">
    <div class="home-banner-bg">
      <div class="banner-view" :style="NowView">
        <div class="view-pic" v-for="item in carousel" :key="item.id">
          <BaseImg :src="item.showImg" :lazy="false" />
        </div>
      </div>
    </div>
    <div class="home-banner-info">
      <div class="home-banner-info_msg"></div>
      <div ref="homebannerinfo" class="home-banner-info_section">
        <ul>
          <li
            ref="cover"
            @mouseleave="MlNowId = item.id"
            @mouseenter=";(MeNowId = item.id), (MlNowId = false)"
            v-for="item in carousel"
            :key="item.id"
          >
            <div class="pic-box">
              <BannerPicCard
                :title="item.animeTitle"
                :Nowing="MeNowId === item.id"
                :Mlafter="MlNowId === item.id"
                :id="item.animeId"
              >
                <BaseImg :src="item.carouselCover" :lazy="false"></BaseImg>
              </BannerPicCard>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

import BannerPicCard from '@/components/Card/BannerPicCard.vue'
import BaseImg from '@/components/Global/BaseImg.vue'

import { Debouncing } from '@/hook/utils'

export default {
  name: 'HomeBanner',
  components: {
    BaseImg,
    BannerPicCard
  },
  props: {
    carousel: []
  },
  setup(props) {
    // 鼠标进入的索引id
    let MeNowId = ref(1)
    // 鼠标离开的索引id
    let MlNowId = ref(1)

    const NowView = computed(() => {
      return {
        transform: `translateX(${-(MeNowId.value - 1) * 100}%)`
      }
    })

    Debouncing(
      MlNowId,
      () => {
        if (MeNowId.value === MlNowId.value) {
          if (
            props.carousel !== null &&
            props.carousel !== undefined &&
            MeNowId.value >= props.carousel.length
          ) {
            MeNowId.value = 1
            MlNowId.value = 1
            return
          }
          MeNowId.value++
          MlNowId.value++
        }
      },
      3000
    )

    return {
      MeNowId,
      MlNowId,
      NowView
    }
  }
}
</script>

<style lang="scss" scoped>
.home-banner {
  position: relative;
  aspect-ratio: 16/9;
  background-color: $box_bg;
  border-radius: 25px 25px 0 0;
  overflow: hidden;
  transform: translate();
  .home-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    .banner-view {
      width: 100%;
      height: 100%;
      display: flex;
      transition: all 0.35s;
      transform: translateX(0);
      .view-pic {
        width: 100%;
        height: 100%;
        flex: 0 0 auto;
      }
    }
  }
  .home-banner-info {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .home-banner-info_msg {
      position: relative;
      height: 100%;
      flex: 1;
      background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
      z-index: 1;
    }
    .home-banner-info_section {
      position: relative;
      display: flex;
      flex-direction: column;
      padding-bottom: 40px;
      z-index: 10;
      &::before {
        position: absolute;
        left: -10%;
        bottom: -100%;
        display: block;
        content: '';
        width: 120%;
        height: 100%;
        box-shadow: 0 -85px 38px $banner;
      }
      ul {
        position: relative;
        display: flex;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        z-index: 99;
        li {
          width: 180px;
          height: 100px;
          margin-right: 20px;
          .pic-box {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
